@import './variables.css';

/* fix height of element */
[data-reactroot] {
  height: 100%;
}

.graphql-voyager {
  font: var(--base-font-size) var(--base-font-family);
  display: flex;
  height: 100%;

  @media (--small-viewport) {
    flex-direction: column;
  }

  & > .doc-panel {
    width: var(--doc-panel-width);
    min-width: var(--doc-panel-width);
    background: var(--doc-panel-bg-color);
    box-sizing: border-box;
    position: relative;
    z-index: 10;
  }

  @media (--small-viewport) {
    & > .doc-panel {
      height: 50%;
      width: 100%;
      max-width: none;
    }
  }
}
